<template>
  <div>
    <el-table
      border
      v-loading="loading"
      :data="tableData"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      cell-class-name="table-cell-align-center"
    >
      <el-table-column
        prop="productName"
        :label="$t('order.productName')"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="orderSn"
        :label="$t('order.orderSn')"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('order.SKUCode')"
        prop="skuCode"
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('order.boxCode')"
        prop="boxCode"
      ></el-table-column>
      <el-table-column
        prop="productPrice"
        show-overflow-tooltip
        :label="$t('common.price')"
      ></el-table-column>
      <el-table-column
        prop="productQuantity"
        show-overflow-tooltip
        :label="$t('common.count')"
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('common.warehouseingName')"
        prop="warehouseName"
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('common.areaName')"
        prop="areaName"
      ></el-table-column>
      <el-table-column
        prop="productTotalPrice"
        show-overflow-tooltip
        :label="$t('common.totalPrice')"
      ></el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 10px">
      <el-pagination
        background
        @current-change="handleCurrent"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="page.pageSize"
        :current-page.sync="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>
  <script>
import { orderProduct } from "@/api/order/index.js";
export default {
  props: ['orderId'],
  data() {
    return {
      queryParams: {
        orderId: null
      },
      tableData: [],
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      loading: false
    };
  },
  watch: {
    orderId: {
      handler(newVal,oldVal) {
        if(newVal) {
          this.getList(newVal)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getList() {
      this.loading = true;
      this.queryParams.orderId = this.orderId
      const query = {
        pageSize: this.page.pageSize,
        pageNum: this.page.pageNum,
        ...this.queryParams,
      };
      orderProduct(query)
        .then((res) => {
          this.tableData = res.content || [];
          this.page.total = Number(res.totalElements);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSelectionChange(val) {
      this.tableIds = val;
    },
    //分页
    handleCurrent(v) {
      this.page.pageNum = v;
      this.getList();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      this.getList();
    },
    handleClick(v) {
      this.activeName = v;
      this.getList();
    },
    handleSeacrh(v) {
      this.queryParams = {
        ...v.filterForm,
        ...v.filterParam,
        name: v.fuzzySearch,
      };
      this.getList();
    },
  },
};
</script>
  